<template>
  <div>
      <Table border :columns="columns" :data="list"  >
        <template #img={row}>
            <img width="50" height="50" :src="row.img" alt="">
        </template>
         <template #action={row,index}>
          <Button type="primary" :disabled='row.status===2'   @click="edit(index)"> 押金退还</Button>
          <!-- <Button type="error" @click="del(index)"> 删除</Button> -->
        </template>
        <template #createAt={row}>
          <div class="c">{{getTime(row.createAt)}}</div>
        </template>
         <template #fahuo={row}>
          <div class="c">{{getTime2(row.createAt)+'前发货'}}</div>
        </template>
    </Table>
    <Modal v-model="modal" width="530" @on-visible-change='cancel' >
        <p slot="header">
          <Icon type="edit"></Icon>
          <span>退还押金</span>
        </p>
        <div>
            <Form :model="formData" ref='formData' label-position="left" :label-width="100" :rules="ruleInline">
              <FormItem label="退还方式" >
                   <Select v-model="thfs" clearable style="width:200px">
        <Option v-for="item in [{text: '全部退还',value: 0},{text: '部分退还',value: 1},{text: '不退还',value: 2}]" :value="item.value" :key="item.value">{{ item.text }}</Option>
    </Select>
              </FormItem>
               <FormItem label="扣除押金" v-show="thfs== 1" >
                <InputNumber :max="formData.yajin" :min="1" v-model="kcyj" />
              </FormItem>
               <FormItem :label="thfs===1?'扣押金原因':'不退还原因'" v-show="thfs!= 0" >
                       <Select v-model="kyjyy" clearable style="width:200px" v-show="thfs== 1">
        <Option v-for="item in [{text: '有损坏',value: 0},{text: '部分装饰丢失',value: 1},{text: '超过订单租赁时间',value: 2},{text: '其他原因',value: 3}]" :value="item.value" :key="item.value">{{ item.text }}</Option>
    </Select>
         <Input v-if="kyjyy===3 ||thfs== 2 " :rows='10' :cols="10" style="margin-top: 10px;resize: none" v-model="value1" type="textarea" placeholder="请输入原因" />
              </FormItem>
            </Form>
        </div>
        <div slot="footer">
            <Button type="primary" size="large"  @click="editAction('formData')">确定</Button>
            <Button size="large"  @click="modal=false">取消</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapState, mapMutations } from 'vuex';
import Distpicker from 'v-distpicker';
export default {
  name: 'MyAddress',
  data () {
    return {
      columns: [
        {
          title: '订单号',
          key: 'order_id',
          width: 180
        },
        {
          title: '图片',
          slot: 'img',
          width: 86
        },
        {
          title: '标题',
          key: 'title',
          width: 300
        },
        {
          title: '地址',
          key: 'address',
          width: 300
        },
        {
          title: '购买用户',
          key: 'user',
          width: 100
        },
        {
          title: '套餐',
          width: 198,
          key: 'package'
        },
        {
          title: '数量',
          key: 'count',
          width: 68
        },
        {
          title: '天数',
          key: 'day',
          width: 68
        },
        {
          title: '尺码',
          width: 68,
          key: 'size'
        },
        {
          title: '租金',
          width: 68,
          key: 'zujing'
        },
        {
          title: '押金',
          width: 68,
          key: 'yajin'
        },
        {
          title: '下单时间',
          width: 180,
          slot: 'createAt'
        },
        {
          title: '押金状态',
          width: 120,
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              params.row.status === 0 ? '未处理' : params.row.status === 1 ? '退押金申请中' : `已处理`
            ]);
          }
        },
        {
          title: '发货时间',
          width: 200,
          slot: 'fahuo',
          align: 'center'
        },
        {
          title: '操作',
          width: 200,
          slot: 'action',
          fixed: 'right'
        }
      ],
      thfs: 0,
      kyjyy: 0,
      kcyj: 0,
      value1: '',
      haha: [
        'static/img/goodsDetail/pack/1.jpg',
        'static/img/goodsDetail/pack/2.jpg',
        'static/img/goodsDetail/pack/3.jpg',
        'static/img/goodsDetail/pack/4.jpg',
        'static/img/goodsDetail/pack/5.jpg',
        'static/img/goodsDetail/pack/6.jpg',
        'static/img/goodsDetail/pack/7.jpg',
        'static/img/goodsDetail/pack/8.jpg',
        'static/img/goodsDetail/pack/9.jpg'

      ],
      modal: false,
      tyjFlag: false,
      modal1: false,
      formData: {
        intro: '',
        img: '',
        price: '',
        values: '',
        create_at: '',
        size: ''
      },
      ruleInline: {
        intro: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      },
      listIndex: 0,
      list: [],
      obj: '',
      mxtime: {
        hours: 1,
        minute: 38,
        seconds: 36
      }
    };
  },
  created () {
    const obj = localStorage.getItem('userorder') || [];
    this.list = JSON.parse(obj);
    // this.list = [JSON.parse(JSON.stringify(localStorage.getItem('userorder')))];
  },
  computed: {
    ...mapState(['userOrder', 'seckills']),
    yjnum (index) {
      if (this.thfs === 0) {
        return this.list[this.listIndex].yajin;
      } else if (this.thfs === 2) {
        return 0;
      } else {
        return this.list[this.listIndex].yajin - this.kcyj;
      }
    },
    kcyytxt () {
      if (this.thfs === 0) {
        return '全部退还';
      } else if (this.thfs === 1) {
        return this.kyjyy === 0 ? '有损坏' : this.kyjyy === 1 ? '部分装饰丢失' : this.kyjyy === 2 ? '超过订单租赁时间' : this.value1;
      } else {
        return this.value1;
      }
    }
  },
  methods: {
    ...mapMutations(['SET_GOODS_INFO']),
    edit (index) {
      this.modal = true;
      this.listIndex = index;
      this.formData.yajin = this.list[index].yajin;
    },
    editAction () {
      if (this.kcyj > this.list[this.listIndex].yajin) {
        this.$Message.error(`本单扣除押金最多为${this.list[this.listIndex].yajin}`);
        return;
      }
      this.list[this.listIndex].status = 2;
      this.list[this.listIndex].tui = this.yjnum;
      this.list[this.listIndex].tuitxt = this.kcyytxt;
      localStorage.setItem('userorder', JSON.stringify(this.list));
      this.$Message.success('操作成功');
      this.modal = false;
      /* this.modal = false;
      this.SET_GOODS_INFO(this.list); */
    },
    add0 (m) { return m < 10 ? '0' + m : m; },
    getTime (q) {
      var time = new Date(q);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
    },
    getTime2 (q) {
      var time = new Date(q);
      time.setDate(time.getDate() + 2);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
    },
    cancel (i) {
      if (!i) {
        this.thfs = 0;
        this.kyjyy = 0;
        this.kcyj = 0;
        this.value1 = '';
      }
    },
    del (index) {
      this.$Modal.confirm({
        title: '信息提醒',
        content: '你确定删除这个收货地址',
        onOk: () => {
          this.$Message.success('删除成功');
        },
        onCancel: () => {
          this.$Message.info('取消删除');
        }
      });
    },
    imghand (name) {
      this.formData.img = name;
      this.list[this.listIndex].img = name;
    }
  },
  components: {
    Distpicker
  },
  store
};
</script>

<style scoped>
.address-box {
  padding: 15px;
  margin: 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #ccc;
}
.address-header {
  height: 35px;
  display: flex;
  justify-content: space-between;
  color: #232323;
  font-size: 18px;

}
.address-header img {
height:50px
}
.address-content {
  font-size: 14px;
}
.address-content-title {
  color: #999;
}
.address-action span{
  margin-left: 15px;
  font-size: 14px;
  color: #2d8cf0;
  cursor: pointer;
}
.imgchan{
  display:inline-block;
  padding: 5px;
  margin:5px;
  border:#fff solid 1px
}
.imgclick{
border:red solid 1px
}
</style>
